<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>input实现多标签</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" />
    <script src="https://www.php.cn/static/js/jquery-1.8.3.min.js?1.8.3"></script>
    <!-- 第二步：引入tagsinput.js -->
    <script src="./js/tagsinput.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-decoration: none;
        }

        .box {
            width: 500px;
            margin: auto;
        }

        .bootstrap-tagsinput {
            background-color: white;
            border: 2px solid #ebedef;
            border-radius: 6px;
            margin-bottom: 18px;
            padding: 6px 1px 1px 6px;
            text-align: left;
            font-size: 0;
        }

        .bootstrap-tagsinput .badge {
            border-radius: 4px;
            background-color: #ebedef;
            color: #7b8996;
            font-size: 13px;
            cursor: pointer;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            overflow: hidden;
            margin: 0 5px 5px 0;
            padding: 6px 28px 6px 14px;
            transition: .25s linear;
        }

        .bootstrap-tagsinput .badge>span {
            color: white;
            padding: 0 10px 0 0;
            cursor: pointer;
            font-size: 12px;
            position: absolute;
            right: 0;
            text-align: right;
            text-decoration: none;
            top: 0;
            width: 100%;
            bottom: 0;
            z-index: 2;
        }

        .bootstrap-tagsinput .badge>span:after {
            content: "x";
            font-family: "Flat-UI-Pro-Icons";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 27px;
        }

        @media (hover: hover) {
            .bootstrap-tagsinput .badge {
                padding: 6px 21px;
            }

            .bootstrap-tagsinput .badge>span {
                opacity: 0;
                filter: "alpha(opacity=0)";
                transition: opacity .25s linear;
            }

            .bootstrap-tagsinput .badge:hover {
                background-color: #16a085;
                color: white;
                padding-right: 28px;
                padding-left: 14px;
            }

            .bootstrap-tagsinput .badge:hover>span {
                padding: 0 10px 0 0;
                opacity: 1;
                -webkit-filter: none;
                filter: none;
            }
        }


        .bootstrap-tagsinput input[type="text"] {
            font-size: 14px;
            border: none;
            box-shadow: none;
            outline: none;
            background-color: transparent;
            padding: 0;
            margin: 0;
            width: auto !important;
            max-width: inherit;
            min-width: 80px;
            vertical-align: top;
            height: 29px;
            color: #34495e;
        }

        .tagsinput-primary {
            margin-bottom: 18px;
        }

        .tagsinput-primary .bootstrap-tagsinput {
            border-color: #1abc9c;
            margin-bottom: 0;
        }

        .tagsinput-primary .badge {
            background-color: #1abc9c;
            color: white;
        }

        .btn {
            background: #1ABC9C;
            border: none;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
        }
    </style>

</head>

<body>

    <div class="box">
        <h1 style="text-align: center;margin: 20px 0;margin-top: 200px;">input实现多标签</h1>
        <!-- 第一步：写一个存标签的input -->
        <div class="tagsinput-primary form-group">
            
            <!-- 通过JS会把ID为tagsinputval的input生成以下代码 -->
            <!-- <div class="bootstrap-tagsinput">
                <span class="badge badge badge-info">PHP中文网<span data-role="remove"></span></span> 
                <span class="badge badge badge-info">前端入门<span data-role="remove"></span></span> 
                <input type="text" placeholder="输入后回车" size="9">
            </div> -->

            <!-- 输入文字后，回车即可生成一个标签 -->
            <input name="tagsinput" id="tagsinputval" class="tagsinput" data-role="tagsinput" value="PHP中文网,前端入门"
                placeholder="输入后回车" />
            <button class="btn" onClick="getinput()">获取输入的值</button>
        </div>
    </div>

    <script type="text/javascript">
        function getinput() {
            alert($('#tagsinputval').val());
        }
    </script>

</body>

</html>